import React, {useState, useEffect} from "react";

// 异步
/*export default function Pre04SetStateSync() {
    const [counter, setCounter] = useState(0)
    const add = () => {
        setCounter(counter + 1)
        console.log({counter})
    }
    return <>
        <h3>同步SetState</h3>
        <p>请观察控制台</p>
        <button onClick={add}>counter: {counter}</button>
    </>
}*/

// 原生事件，无效
/*export default function Pre04SetStateSync() {
    const [counter, setCounter] = useState(0)

    /!*const onClick = ()=>{
        add()
    }*!/
    useEffect(() => {
        const add = () => {
            setCounter(counter + 1)
            console.log(counter)
        }
        document.querySelector('#btn').addEventListener('click', add)
    }, [])

    return <>
        <h3>同步SetState</h3>
        <p>请观察控制台</p>
        <button id='btn'>counter: {counter}</button>
    </>
}*/
// 写入回调，不支持
/*export default function Pre04SetStateSync() {
    const [counter, setCounter] = useState(0)
    const add = () => {
        setCounter(counter + 1, ()=>{
            console.log({counter})
        })
    }
    return <>
        <h3>同步SetState</h3>
        <p>请观察控制台</p>
        <button onClick={add}>counter: {counter}</button>
    </>
}*/
// 连续set
/*export default function Pre04SetStateSync() {
    const [counter, setCounter] = useState(0)
    const add = () => {
        setCounter(counter => counter + 1)
        setCounter(counter => counter + 2)
    }
    return <>
        <h3>同步SetState</h3>
        <p>请观察控制台</p>
        <button onClick={add}>counter: {counter}</button>
    </>
}*/
export default function Pre04SetStateSync() {
    const [counter, setCounter] = useState(0)
    const add = () => {
        setCounter(counter + 1)
    }
    useEffect(() => {
        console.log({counter})
    }, [counter])

    return <>
        <h3>同步SetState</h3>
        <p>请观察控制台</p>
        <button onClick={add}>counter: {counter}</button>
    </>
}


// class组件

/*
export default class Pre04SetStateSync extends React.Component{
    state = {
        counter:0
    }
    add = () => {
        setTimeout(()=>{
            this.setState({counter:this.state.counter + 1})
            console.log('~~this.state.counter',this.state.counter)
        },0)

    }

    render() {
        return <>
            <h3>同步SetState</h3>
            <p>请观察控制台</p>
            <button onClick={this.add}>counter: {this.state.counter}</button>
        </>
    }
}*/

// 原生事件
/*
export default class Pre04SetStateSync extends React.Component {
    state = {
        counter: 0
    }

    componentDidMount() {
        document.querySelector('#btn').addEventListener('click', this.add)
    }

    add = () => {
        this.setState({counter: this.state.counter + 1})
        console.log('~~this.state.counter', this.state.counter)
    }

    render() {
        return <>
            <h3>同步SetState</h3>
            <p>请观察控制台</p>
            <button id='btn'>counter: {this.state.counter}</button>
        </>
    }
}
*/
/*
export default class Pre04SetStateSync extends React.Component {
    state = {
        counter: 0
    }
    add = () => {
        this.setState({counter: this.state.counter + 1}, () => {
            console.log('~~this.state.counter', this.state.counter)
        })
    }

    render() {
        return <>
            <h3>同步SetState</h3>
            <p>请观察控制台</p>
            <button onClick={this.add}>counter: {this.state.counter}</button>
        </>
    }
}
*/
